<template>
  <el-slider
    :format-tooltip="formatTooltip"
    @input="change"
    :max="1"
    :step="0.01"
    v-model="value"
  ></el-slider>
</template>

<script>
export default {
  name: 'app-slider',
  props: {
    defaultValue: {
      type: Number,
      default: 1
    },
    formatKey: {
      type: String,
      default: '透明度'
    },
    index: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      value: 1
    }
  },
  watch: {
    defaultValue: {
      handler(value) {
        this.value = value
      },
      immediate: true
    }
  },
  methods: {
    change(value) {
      this.$emit('change', value, this.index)
    },
    formatTooltip(value) {
      return `${this.formatKey}：${value}`
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-slider__runway {
    height: 4px;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.3);

    .el-slider__bar {
      height: 4px;
      background-color: #fff;
    }

    .el-slider__button-wrapper {
      height: 10px;
      width: 10px;
      top: -9px;
    }
  }

  .el-slider__button {
    width: 10px;
    height: 10px;
    border: none;
  }
}
</style>
